<template>
  <div class="coment">
    <header class="header">
      <van-search show-action v-model="value" placeholder="输入您想要的商品">
        <template #action>
          <van-icon size="24px" name="service-o" />
        </template>
      </van-search>
    </header>
    <div class="daohang">
      <ul>
        <li>活动</li>
        <li>新品</li>
        <li>客厅</li>
        <li>厨房</li>
        <li>卧室</li>
      </ul>
    </div>
    <main class="main">
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
      <dl style="float: left; margin-left: 35px">
        <dt>
          <img
            style="width: 135px; height: 135px"
            src="../assets/logo.png"
            alt=""
          />
        </dt>
        <dd>
          <p>给他和肉体和肉体和</p>
          <span style="color: #ff6600">￥1799</span><s>￥2699</s>
        </dd>
      </dl>
    </main>
    <footer class="footer">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact-o">我</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;

  .coment {
    width: 100%;
    height: 100%;
    background-color: aquamarine;
    .header {
      top: 0;
      left: 0;
    }
    .daohang {
     
      border-radius: 15px;
      background-color: #fff;
      margin-top: 20px;
    }
    .daohang ul li {
      float: left;
      margin-left: 25px;
      font-size: 25px;
    }
  }
}
</style>